* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.container {
    width: 355px;
    margin: 0 auto;
}


//主要内容
main {
    .mainM {
        z-index: 10000;

        .totalDistance {
            margin-top: 10px;
            height: 90px;

            .runDistance {
                color: #333;
                font-weight: 600;
                margin-left: 20px;
                margin-bottom: 20px;
            }

            #runNum {
                font-size: 48px;
                color: #4294FF;
                font-weight: 500;
                margin-left: 20px;
            }
        }
    }


    #map-container {
        overflow: hidden;
        width: 100%;
        height: 450px !important;
        margin: 0;
        font-family: "微软雅黑";
        margin-top: 120px;
        opacity: 0.7;
    }

    .map {
        width: 100%;
        height: 400px;
        z-index: 999;
        top: 155px;
        left: 20px;
        background-color: transparent;

        #GoBtn {
            background-color: rgba(66, 148, 255, 1);
            opacity: 0.9;
            color: #007bb5;
            font-size: 70px;
            font-weight: 600;
            display: inline-block;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            text-align: center;
            line-height: 160px;
            left: 50%;
            top: 50%;
            transform: translate(0, -50%);
        }

        .set {
            top: 170px;
            .shezhi {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #eee;
                box-shadow: 1px 1px 10px 4px #ddd;
                text-align: center;
                line-height: 50px;
                bottom: -45px;
                left: 40px;
                opacity: 0.8;

                .icon-shezhi {
                    font-size: 30px;
                }
            }
            
            .yinyue {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #eee;
                box-shadow: 1px 1px 10px 4px #ddd;
                text-align: center;
                line-height: 50px;
                bottom: -45px;
                left: 280px;
                opacity: 0.8;

                .icon-yinle {
                    font-size: 30px;
                }
            }
        }

    }



    .totalRoute {
        .run-path {
            font-weight: 600;
            margin-top: 20px;
            margin-left: 20px;
        }

        .route {
            color: #9A9A9A;
            margin-left: 20px;
            margin-top: 10px;
            margin-bottom: 20px;
        }
        .icon-xiayiye{
            top: 0;
            right: 0;
            font-size: 45px;
            font-weight: 500;
        }
    }
}

//倒计时
.background{
    background-color: #1582cc;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 100000;
    .countDown{
        font-size: 120px;
        color: #fff;
        left: 50%;
        top: 30%;
        transform: translate(-50%,0);
    }
}